<template>
    <div class="login-container">
        <div class="login-container__content">
            <div class="login-title">{{ $project.projectName }}</div>
            <el-form :model="rulesForm">
                <el-form-item label="用户名">
                    <el-input placeholder="请输入用户名" name="username" type="text" v-model="rulesForm.username" />
                </el-form-item>
                <el-form-item label="密码">
                    <el-input placeholder="请输入密码" name="username" type="password" v-model="rulesForm.password" />
                </el-form-item>
                <el-form-item>
                    <el-radio-group v-model="rulesForm.role">
                        <el-radio v-for="item in roles" :key="item.roleName" :label="item.roleName">
                            {{ item.roleName }}
                        </el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <div class="button-box">
                <el-button type="primary" @click="login()" class="loginInBt">登录</el-button>
                <el-button type="primary" @click="register('laoren')" class="register">注册老人</el-button>
            </div>
        </div>
    </div>
</template>
<script>
import menu from '@/utils/menu';

export default {
    data() {
        return {
            baseUrl: this.$base.url,
            rulesForm: {
                username: '',
                password: '',
                role: '管理员',
                code: '',
            },
            menus: [],
            roles: [],
            tableName: '',
            codes: [
                {
                    num: 1,
                    color: '#000',
                    rotate: '10deg',
                    size: '16px',
                },
                {
                    num: 2,
                    color: '#000',
                    rotate: '10deg',
                    size: '16px',
                },
                {
                    num: 3,
                    color: '#000',
                    rotate: '10deg',
                    size: '16px',
                },
                {
                    num: 4,
                    color: '#000',
                    rotate: '10deg',
                    size: '16px',
                },
            ],
        };
    },
    mounted() {
        this.menus = menu.list();

        for (let i = 0; i < this.menus.length; i++) {
            if (this.menus[i].hasBackLogin === '是') {
                this.roles.push(this.menus[i]);
            }
        }
    },
    created() {
        this.getRandCode();
    },
    destroyed() {},
    components: {},
    methods: {
        //注册
        register(tableName) {
            this.$storage.set('loginTable', tableName);
            this.$router.push({ path: '/register' });
        },
        // 登陆
        login() {
            if (!this.rulesForm.username) {
                this.$message.error('请输入用户名');
                return;
            }
            if (!this.rulesForm.password) {
                this.$message.error('请输入密码');
                return;
            }
            if (this.roles.length > 1) {
                if (!this.rulesForm.role) {
                    this.$message.error('请选择角色');
                    return;
                }

                let menus = this.menus;
                for (let i = 0; i < menus.length; i++) {
                    if (menus[i].roleName === this.rulesForm.role) {
                        this.tableName = menus[i].tableName;
                    }
                }
            } else {
                this.tableName = this.roles[0].tableName;
                this.rulesForm.role = this.roles[0].roleName;
            }

            this.$http({
                url: `${this.tableName}/login?username=${this.rulesForm.username}&password=${this.rulesForm.password}`,
                method: 'post',
            }).then(({ data }) => {
                if (data && data.code === 0) {
                    this.$storage.set('Token', data.token);
                    this.$storage.set('role', this.rulesForm.role);
                    this.$storage.set('sessionTable', this.tableName);
                    this.$storage.set('adminName', this.rulesForm.username);
                    this.$router.replace({ path: '/index/' });
                } else {
                    this.$message.error(data.msg);
                }
            });
        },
        getRandCode(len = 4) {
            this.randomString(len);
        },
        randomString(len = 4) {
            let chars = [
                'a',
                'b',
                'c',
                'd',
                'e',
                'f',
                'g',
                'h',
                'i',
                'j',
                'k',
                'l',
                'm',
                'n',
                'o',
                'p',
                'q',
                'r',
                's',
                't',
                'u',
                'v',
                'w',
                'x',
                'y',
                'z',
                'A',
                'B',
                'C',
                'D',
                'E',
                'F',
                'G',
                'H',
                'I',
                'J',
                'K',
                'L',
                'M',
                'N',
                'O',
                'P',
                'Q',
                'R',
                'S',
                'T',
                'U',
                'V',
                'W',
                'X',
                'Y',
                'Z',
                '0',
                '1',
                '2',
                '3',
                '4',
                '5',
                '6',
                '7',
                '8',
                '9',
            ];
            let colors = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f'];
            let sizes = ['14', '15', '16', '17', '18'];

            let output = [];
            for (let i = 0; i < len; i++) {
                // 随机验证码
                let key = Math.floor(Math.random() * chars.length);
                this.codes[i].num = chars[key];
                // 随机验证码颜色
                let code = '#';
                for (let j = 0; j < 6; j++) {
                    let key = Math.floor(Math.random() * colors.length);
                    code += colors[key];
                }
                this.codes[i].color = code;
                // 随机验证码方向
                let rotate = Math.floor(Math.random() * 60);
                let plus = Math.floor(Math.random() * 2);
                if (plus === 1) rotate = '-' + rotate;
                this.codes[i].rotate = 'rotate(' + rotate + 'deg)';
                // 随机验证码字体大小
                let size = Math.floor(Math.random() * sizes.length);
                this.codes[i].size = sizes[size] + 'px';
            }
        },
    },
};
</script>

<style lang="scss" scoped></style>
